<template>
  <view class="load" v-if="!load">
    <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
  </view>
  <view class="fieldlist" v-else>
    <view class="fix">
      <u-status-bar></u-status-bar>
      <view class="topBox">
        <view class="hyq">订场</view>
      </view>
      <!-- <view class="searchbox">
			<view class="searchimgbox">
				<image class="searchimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710752819733548.png"></image>
			</view>
			<input
				class="searchtext"
				type="text"
				v-model="golfname"
				placeholder="请输入关键字搜索"
				placeholder-class="placeholderStyle "
				@blur="handsearch"
			/>
		</view> -->
      <!-- <view class="puadd" @click="publish">
			<image class="releaseimg" :src="ossPath + '/upload/17152226989686.png'"></image>
		</view> -->
      <!-- <view class="motionbox">
      <view class="tabbox" :class="tabiex == index ? 'text4' : ''" v-for="(item, index) in tablist" :key="index"
        @click="changetab(item, index)">
        {{ item.Code }}
        <view v-if="tabiex == index" class="bottombox"></view>
      </view>
    </view> -->
      <!-- <view class="topnav">
        <view class="title">
          {{ navlist[0].title + "：" }}
        </view>
        <view class="typebox">
          <view class="type" v-for="(item, index) in ctrlSportNum(navlist[0].list)" :key="item.id"
            @click="chooseSport(navlist[0], 0, index)" :class="{ bg4: item.choose }">
            {{ item.text }}
          </view>
        </view>

        <view class="morebox" @click="switchSport">
          <image v-if="!showSearch" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719825584882466.png"
            class="downarr"></image>
          <image v-else src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719828247399613.png"
            class="downarr"></image>
        </view>
      </view> -->
      <!-- 用于计算高度的隐藏复制品 star -->
      <view class="screenBox fakeBox">
        <view class="navbox">
          <view class="navlist" v-for="(item, index) in navlist" :key="item.id">
            <block v-if="index > 0">
              <view class="navtitle">{{ item.title + "：" }}</view>
              <view class="valuebox">
                <view class="navvalue" v-for="(value, i) in item.list" :key="i">
                  {{ value.text }}
                </view>
              </view>

            </block>
          </view>
          <view class="btnbox">
            <view class="reset" @click="resetSearch">重置</view>
            <view class="filter">确认筛选</view>
          </view>
        </view>
      </view>
      <!-- 用于计算高度的隐藏复制品 end -->
      <!-- <view class="screenBox" :style="{ height: showSearch ? searchHeight + 'px' : '0' }">
        <view class="navbox">
          <view class="navlist" v-for="(item, index) in navlist" :key="item.id">
            <block v-if="index > 0">
              <view class="navtitle">{{ item.title + "：" }}</view>
              <view class="valuebox">
                <view class="navvalue" v-for="(value, i) in item.list" :key="i" @click="chooseSport(item, index, i)"
                  :class="{ bg4: value.choose }">
                  {{ value.text }}
                </view>
              </view>

            </block>
          </view>
          <view class="btnbox">
            <view class="reset" @click="resetSearch">重置</view>
            <view class="filter">确认筛选</view>
          </view>
        </view>
      </view> -->
    </view>
    <view>
      <x-scroll @scroll="scroll" :fixed="true" :isNav="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower"
        :refresh="true">
        <view class="bannerBox">
          <swiper class="swiper" :autoplay="true" circular :style="{ height: swiperHeight + 'rpx' }">
            <swiper-item v-for="(item, index) in bannerList" :key="index">
              <view class="bannerImageBox" @click="gotobanner(item)">
                <image class="adverimg" :src="item.Banner" mode="widthFix"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <block v-if="list.length != 0">
          <view class="listbox" v-for="(item, index) in list" :key="index" @click="gotostadium(item.ID)">
            <view class="imgbox">
              <image class="courtimg" :src="item.ShopLogo" mode="aspectFill"></image>
            </view>

            <view class="contentbox">
              <view class="shopNamebox">
                <view class="shopName">
                  {{ $util.entitiesToUtf16(item.ShopName) }}
                </view>
                <image v-if="item.IsAuth == 1" class="authen"
                  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17174039204751074.png" mode="widthFix">
                </image>
              </view>

              <view class="labelbox">
                <text class="label" v-for="(value, i) in item.Specialty" :key="i">{{ value }}</text>
              </view>
              <view class="time">{{
                item.WorkTime ? "营业时间：" + item.WorkTime : ""
              }}</view>
              <view class="addressbox">
                <view class="address">{{ item.Province || "" }}</view>
                <view class="address">{{ item.City || "" }}</view>
                <!-- <view class="move">{{ item.Province }}</view> -->
              </view>
            </view>
          </view>
          <view style="height:250rpx;"></view>
        </block>
        <view class="nondbox" v-else>
            <u-empty mode="list" width="100" height="100" icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
              iconSize="32" text="暂无场地"></u-empty>
        </view>
      </x-scroll>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      skill: '', // 运动类型
      Distance:'', // 距离
      televel:'', // 级别
      navlist: [
        {
          title: "运动",
          id: 'b1',
          list: [],
        },
        {
          title: "距离",
          id: 'b2',
          list: [
            { choose: false, text: "500m以内" },
            { choose: false, text: "2km以内" },
            { choose: false, text: "5km以内" },
            { choose: false, text: "同城" },
            { choose: false, text: "不限" },
          ],
        },
        {
          title: "级别",
          id: 'b3',
          list: [{ choose: false, text: "金牌商家" }],
        },
      ],
      load: false,
      ossPath: "",
      tabiex: 0,
      index: 1,
      size: 10,
      list: [],
      islist: true,
      label: [],
      distance: null,
      nowLng: null,
      nowLat: null,
      // golfname: '',
      tablist: [],
      shopstate: -1,
      swiperHeight: 228, //轮播图高度
      bannerList: [],
      Shoptype: "",
      searchHeight: 0, //搜索box的高度
      showSearch: false,
    };
  },
  async onLoad() {
    this.ossPath = this.$ossPath;
    this.getcourtlist();
    await this.getTab();
    this.isMyShop();
    this.GetBanner();
    setTimeout(() => {
      this.getSearchHeight();
    }, 500);

  },
  methods: {
    // 控制筛选展开前运动标签显示个数
    ctrlSportNum(list){
      let num = list.length;
      let newList = [];
      if (num>5 && !this.showSearch) {
        newList=list.slice(0,5)
      }else{
        newList=list
      }
      return newList
    },
    // 获取搜索box高度
    getSearchHeight() {
      let that = this
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".fakeBox")
        .boundingClientRect((data) => {
          if (data) {
            // data.height 是元素的高度
            that.searchHeight = data.height
            // console.log("元素高度：", data);
          }
        })
        .exec();
    },
    // 重置搜索
    resetSearch() {
      for (let i = 0; i < this.navlist.length; i++) {
        for (let j = 0; j < this.navlist[i].list.length; j++) {
          this.navlist[i].list[j].choose = false;
        }
      }
      this.skill = ''
      this.Distance = ''
      this.televel = ''
      // this.searchContent = "";
      // this.subSearch();
    },
    // 切换筛选
    switchSport() {
      this.showSearch = !this.showSearch;
    },
    // 选择运动标签
    updatePropertyByItemId(targetProperty, list) {
      let itemList = [];
      for (let j = 0; j < list.length; j++) {
        if (list[j].choose) {
          itemList.push(list[j].text);
        }
      }
      this[targetProperty] = itemList.join(',');
    },
    chooseSport(item, index, i) {
      let list = this.navlist;
      list[index].list[i].choose = !item.list[i].choose;
      // item.list[i].choose = !item.list[i].choose;
      this.$set(this.navlist, list);
      const sportData={
        'b1':'skill',
        'b2':'Distance',
        'b3':'televel',
      }
      this.updatePropertyByItemId(sportData[item.id], list[index].list)
    },

    gotobanner(item) {
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        this.nav_to("/pages/start/start2");
      } else {
        this.nav_to(item.GoUrl);
      }
    },
    //轮播图
    async GetBanner() {
      // let res = await this.$api.post('/Banner/GetBanner', {
      // 	PageKey: 'courtlist-top'
      // })
      // if (res.code == 0) {
      // 	this.bannerList = res.data
      // 	console.log(res);
      // 	console.log(this.bannerList,'1111');
      // }
      this.$api
        .post("/Banner/GetBanner", {
          PageKey: "courtlist-top",
        })
        .then((res) => {
          if (res.code == 0) {
            this.bannerList = res.data;
          }
        })
        .catch((err) => {
          // console.log(err,'errrrrrrrrrrrrrrrrr');
        });
    },
    async isMyShop() {
      let res = await this.$api.post("Shops/MyShop");
      if (res.code == 0) {
        if (res.data) {
          this.shopstate = res.data.Status;
        }
      }
    },
    async getTab() {
      let dic = await this.$api.post("Catalog/GetDictionary", {
        Type: "PlaceRecomendSport",
      });
      if (dic.code == 0) {
        // this.tablist = dic.data;
        // this.tablist.unshift({ Code: "推荐" });
        let list = [];
        for (let i = 0; i < dic.data.length; i++) {
          const { ID, Code } = dic.data[i];
          let data = {
            text: Code,
            choose: false,
            id: ID,
          };
          list.push(data);
        }
        this.navlist[0].list = list;
      }
    },
    //发布
    async publish(index) {
      let _this = this;
      let u = await this.$api.post("User/GetUserInfo", {
        ID: uni.getStorageSync("user").UserID,
      });
      if (u.data.IsAuth == 0) {
        this.nav_to("/pages/start/start2");
      } else {
        if (this.shopstate == 1) {
          this.nav_to("/pages/teacher/real_field");
        } else {
          if (this.shopstate == 0) {
            this.$pv.msg("您的认证在审核中");
          } else {
            uni.showModal({
              title: "温馨提示",
              content: "您还不是商家，请先认证",
              confirmText: "认证",
              cancelText: "取消",
              success: function (res) {
                if (res.confirm) {
                  _this.nav_to("/pages/user/real_store");
                } else if (res.cancel) {
                  return false;
                }
              },
            });
          }
        }
      }
    },
    changetab(item, index) {
      this.tabiex = index;
      if (index != 0) {
        this.Shoptype = item.Code;
      } else {
        this.Shoptype = "";
      }
      this.getcourtlist();
    },
    toFiltrate() { },
    //搜索
    handsearch() {
      if (this.golfname == "") {
        this.index = 1;
      }
      this.list = [];
      this.getcourtlist();
    },
    //跳转球场详细
    gotostadium(id) {
      uni.navigateTo({
        url: `/pages/court/stadium?id=${id}`,
      });
    },
    //球场列表
    async getcourtlist() {
      let res = await this.$api.post("/Shops/List", {
        PageIndex: this.index,
        PageSize: this.size,
        ShopName: "",
        City: "",
        ShopType: this.Shoptype,
      });
      // let a = res.data;
      if (res.code == 0) {
        if (res.data.length < this.size) {
          this.islist = false;
        }
        if (this.index == 1) {
          this.list = res.data;
        } else {
          // this.list = []
          this.list = this.list.concat(res.data);
        }
        for (let i = 0; i < this.list.length; i++) {
          let lable = [];
          try {
            lable = this.list[i].Specialty.split(",") || this.list[i].Specialty;
          } catch (error) {
            lable = this.list[i].Specialty;
          }

          this.list[i].Specialty = lable;
        }
        this.load = true;
      }
    },
    //滚动到底部触发
    async scrolltolower() {
      if (this.islist) {
        this.index++;
        this.getcourtlist();
      }

      // this.getMsgNum();
    },
    scroll(e) {
      const detail = e.detail;
      // console.log(detail);
    },
    //下拉刷新
    onRefresh() {
      this.index = 1;
      this.getcourtlist();
    },
  },
};
</script>
<style lang="scss">
page {
  // background-color: #f6f6f6;
}

.topBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15rpx auto;
  position: relative;

  .hyq {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }
}

.topnav {
  display: flex;
  align-items: flex-start;
  padding: 0 30rpx;
  margin-top: 24rpx;

  // height: 66rpx;
  // overflow: hidden;
  .title {
    font-size: 28rpx;
    color: #333333;
    height: 54rpx;
    display: flex;
    align-items: center;
  }

  .typebox {
    display: flex;
    flex: 1;
    flex-wrap: wrap;

    .bg4 {
      border: 2rpx solid #706eee;
      background-color: #706eee !important;
      color: #fff !important;
    }
  }

  .type {
    padding: 8rpx 16rpx;
    color: #706eee;
    border: 2rpx solid #706eee;
    font-size: 24rpx;
    margin-right: 12rpx;
    border-radius: 8rpx;
    margin-bottom: 14rpx;
    // background-color: #706EEE;
  }

  .morebox {
    .moretitle {
      font-size: 24rpx;
      color: #666666;
    }

    .downarr {
      width: 48rpx;
      height: 48rpx;
    }

    .uparr {
      width: 16rpx;
      height: 16rpx;
    }
  }
}

.screenBox {
  position: absolute;
  left: 0;
  bottom: 1rpx;
  transform: translateY(100%);
  width: 100%;
  background: white;
  padding: 0 30rpx;
  overflow: hidden;
  transition: 0.8s all;

  .navbox {
    padding-bottom: 15rpx;

    .navlist {
      display: flex;
      //   align-items: center;
      margin-bottom: 12rpx;

      .navtitle {
        color: #333333;
        font-size: 28rpx;
        height: 54rpx;
        display: flex;
        align-items: center;
      }

      .valuebox {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
      }

      .navvalue {
        padding: 8rpx 16rpx;
        background-color: #fff;
        color: #706eee;
        border: 2rpx solid #706eee;
        font-size: 24rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;
        margin-bottom: 16rpx;
      }

      .bg4 {
        border: 2rpx solid #706eee;
        background-color: #706eee !important;
        color: #fff !important;
      }
    }
  }

  .btnbox {
    display: flex;
    align-items: center;
    margin-top: 24rpx;

    .reset {
      width: 232rpx;
      height: 72rpx;
      border-radius: 8rpx;
      border: 2rpx solid #706eee;
      text-align: center;
      line-height: 72rpx;
      color: #706eee;
      font-size: 28rpx;
      margin-right: 24rpx;
    }

    .filter {
      width: 446rpx;
      height: 72rpx;
      background: #706eee;
      border-radius: 8rpx;
      color: #fff;
      text-align: center;
      line-height: 72rpx;
      font-size: 28rpx;
    }
  }

  .searchCell {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .scIcon {
      margin-right: 16rpx;
    }

    .scInp {
      width: 380rpx;
      background: #f2f2f2;
      border-radius: 100rpx;
      padding: 10rpx 30rpx;

      >input {
        width: 100%;
        background: transparent;
      }
    }

    .scBtnBox {
      display: flex;
      margin-left: auto;

      .scSumBtn {
        padding: 13rpx 24rpx;
        background: #706eee;
        border-radius: 32rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &:last-child {
          margin-left: 20rpx;
        }
      }
    }
  }

  .tagBox {
    width: 100%;
    // overflow-y: auto;
    margin-top: 20rpx;
    padding-bottom: 20rpx;

    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;

      .tagCell {
        padding: 10rpx 20rpx;
        border-radius: 12rpx;
        border: 2rpx solid #706eee;
        background: white;
        color: #706eee;
        margin: 0 20rpx 10rpx;
        margin-left: 0;
        white-space: nowrap;
        font-size: 22rpx;
      }

      .tagIng {
        border: 2rpx solid #706eee;
        background: #706eee;
        color: white;
      }
    }
  }
}

.fakeBox {
  left: 0;
  bottom: 100%;
  transform: translateY(-100%);
  opacity: 0;
}

.fieldlist {
  height: 100vh;
  overflow: hidden;
}

.fix {
  position: relative;
  background-color: #fff;
  width: 750rpx;
  top: 0;
  left: 0;
  z-index: 999;
}

.bannerImageBox {
  width: 100%;
  padding: 24rpx 0;

  .adverimg {
    width: 702rpx;
    height: 180rpx;
    display: block;
    margin: 0 auto;
  }
}

.puadd {
  position: fixed;
  right: 32rpx;
  bottom: 100rpx;
  z-index: 1000;

  .releaseimg {
    width: 108rpx;
    height: 108rpx;
  }
}

.checkbox {
  width: 96rpx;
  height: 48rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: 24rpx;
  margin-left: 40rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;

  &::after {
    position: absolute;
    top: 76%;
    right: -4rpx;
    transform: translate(-11%, -32%) rotate(135deg);
    content: "";
    border-top: 12rpx solid transparent;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
    border-bottom: 12rpx solid #999;
  }
}

.motionbox {
  width: 100%;
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;

  .tabbox {
    font-size: 28rpx;
    color: #999999;
    margin-left: 40rpx;
    position: relative;
  }

  .text4 {
    color: #333333;
    font-weight: 600;
  }

  .bottombox {
    position: absolute;
    bottom: -7rpx;
    left: 50%;
    transform: translate(-50%, 0);
    width: 48rpx;
    height: 8rpx;
    border-radius: 5rpx;
    background-color: #706eee;
  }
}

.searchbox {
  padding: 20rpx 24rpx;
  display: flex;
  align-items: center;
  box-sizing: 36rpx;
  background-color: #fff;

  .searchimgbox {
    border-radius: 36rpx 0 0 36rpx;
    text-align: center;
    width: 10%;
    height: 72rpx;
    line-height: 72rpx;
    overflow: hidden;
    background-color: #f7f7f7;

    .searchimg {
      vertical-align: middle;
      width: 40rpx;
      height: 40rpx;
      margin: 0 0 12rpx 15rpx;
    }
  }

  .searchtext {
    flex: 1;
    background-color: #f7f7f7;
    color: #999999;
    height: 72rpx;
    border-radius: 0 36rpx 36rpx 0;
  }

  .input-placeholder {
    color: #999;
  }
}

.placeholderStyle {
  color: rgba(255, 255, 255, 0.6);
  /* 占位符文本颜色 */
  // color: red;
  font-size: 28rpx;
  /* 占位符文本字体大小 */
  line-height: 72rpx;
}

.listbox {
  margin: 20rpx 24rpx;
  border-radius: 16rpx;
  min-height: 260rpx;
  display: flex;
  background-color: #fff;
  padding: 20rpx 20rpx;
  box-sizing: border-box;

  .imgbox {
    width: 35%;
    height: 100%;
    text-align: center;

    .courtimg {
      width: 210rpx;
      height: 210rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }
  }

  .contentbox {
    width: 65%;
    height: 100%;
    margin-top: 10rpx;

    .shopNamebox {
      display: flex;
      align-items: center;
    }

    .shopName {
      max-width: 80%;
      color: #333333;
      font-size: 32rpx;
      margin-bottom: 10rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .authen {
      width: 104rpx;
      height: 44;
      margin-left: 4rpx;
    }

    .labelbox {
      margin-bottom: 36rpx;

      .label {
        // width: 92rpx;
        // height: 40rpx;
        // text-align: center;
        // line-height: 40rpx;
        font-size: 20rpx;
        color: #f56e1e;
        background: #ffeee4;
        border-radius: 8rpx;
        margin-right: 20rpx;
        padding: 6px 12rpx;
      }
    }

    .time {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 10rpx;
    }

    .addressbox {
      width: 100%;
      display: flex;
      // justify-content: space-between;

      .address {
        // width: 70%;
        font-size: 24rpx;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 15rpx;
      }

      .move {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}

.nondbox {
  width: 30%;
  margin: 20rpx auto;
  text-align: center;
}
</style>
